<template>
	
	<view class="bf" v-if="token">
		<!-- 使用uview设置导航条 -->
		<u-navbar :is-back="false" :background="{
		'background-image':'linear-gradient(to right,rgb(251,214,141),rgb(246,163,131))'
	}" height="44" :border-bottom="false">
			<view class="bf-map-slot-wrap u-m-l-20 u-p-l-10 u-p-r-10 u-p-t-5 u-p-b-5" @click="toLocation">
				<u-icon name="map" size="24"></u-icon>
				<text class="u-p-l-10 u-p-r-10">{{leaderAddressVo.takeName?leaderAddressVo.takeName:'未设置提货点'}}</text>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
		</u-navbar>
		<!-- 主内容 -->
		<view class="bf-content">
			<!-- 头部 -->
			<view class="bf-content-header u-m-l-20 u-m-r-20">
				<u-icon name="search" class="u-m-l-20" size="22"></u-icon>
				<u-notice-bar class="bf-content-header-notice" mode="vertical" :volume-icon="false"
					color="rgba(200,200,200,0.7)" bg-color="none" :list="list"></u-notice-bar>
				<u-button class="u-m-r-20" type="error" size="mini">搜索</u-button>
			</view>
			<!-- 新人专享 -->
			<view class="bf-content-new u-m-20">
				<view class="u-font-lg u-content-color u-m-10 u-p-t-10">新人专享低价好物</view>
				<!-- scrollview -->
				<scroll-view scroll-x enable-flex class="bf-content-new-scroll u-m-t-20">
					<!-- scrollviewItem -->
					<view class="u-flex u-m-t-20">
						<view class="bf-content-new-srcoll-item u-m-r-10 u-m-l-10" v-for="item in newPersonSkuInfoList" :key="item.id">
							<ListImgItem :src="item.imgUrl"
							:showLeft="item.skuType===1"
							:showRight="false"
							:showBottom="item.isNewPerson===1"
								width="200rpx" height="200rpx"></ListImgItem>
							<text class="u-type-error">￥{{item.price}}</text>
							<AddToCart :cartDetail="item" :skuId="item.id"></AddToCart>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 尾部 -->
			<view class="bf-content-footer"></view>

		</view>
		<!-- 团购相关细则 -->
		<view class="bf-rule" @click="showPopUp">
			<u-icon name="bell-fill"></u-icon>
			<text>平台资质、法律条款、规则及投诉入口</text>
			<u-popup v-model="popup" mode="bottom" border-radius="20" :closeable="true">
				<view class="u-p-t-20 u-p-b-20">
					<view class="u-m-20">
						<view class="u-font-xl u-m-b-10">
							<u-icon name="checkmark-circle" color="#dd6161" size="28" class="u-m-r-10"></u-icon>
							品质保障
						</view>
						<view class="u-light-color u-font-xs">
							全场商品均经过品质检验，若收货时发现商品有变质、腐烂、损坏等情况，可申请退款
						</view>
					</view>

					<view class="u-m-20">
						<view class="u-font-xl u-m-b-10">
							<u-icon name="kefu-ermai" color="#dd6161" size="28" class="u-m-r-10"></u-icon>
							极速退款
						</view>
						<view class="u-light-color u-font-xs">
							根据平台的规则，在一定条件下，可享受极速退款到账服务
						</view>
					</view>

					<view class="u-m-20">
						<view class="u-font-xl u-m-b-10">
							<u-icon name="bag" color="#dd6161" size="28" class="u-m-r-10"></u-icon>
							次日自提
						</view>
						<view class="u-light-color u-font-xs">
							每日23点前下单，次日16点可到下单门店自提
						</view>
					</view>

					<view class="u-m-20">
						<view class="u-font-xl u-m-b-10">
							<u-icon name="integral" color="#dd6161" size="28" class="u-m-r-10"></u-icon>
							资质规则
						</view>
						<view class="u-light-color u-font-xs">
							平台资质、法律条款、规则及投诉入口，点击查看详情
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 商品分类 -->
		<view class="bf-category u-m-20 u-p-20">
			<scroll-view scroll-x enable-flex @scroll="scrollMove">
				<view class="u-flex">
					<view class="bf-category-item u-m-r-20" v-for="item in categoryList" :key="item.id">
						<u-image :src="item.imgUrl"
							border-radius="30rpx" width="100rpx" height="100rpx"></u-image>
						<text class="u-font-xs">{{item.name}}</text>
					</view>

				</view>
			</scroll-view>
			<!-- 进度条 -->
			<view class="bf-category-progress">
				<u-line-progress active-color="#f6a383" inactive-color="white" :show-percent="false" height="4"
					:percent="bfCateProgress"></u-line-progress>
			</view>
		</view>
		<!-- 限时秒杀 -->
		<view class="bg-secKill u-m-l-20"  v-if="seckillSkuVoList">
			<!-- 秒杀title -->
			<view class="u-flex u-flex-1 u-m-l-10">
				<view class="u-type-error u-font-lg">
					秒杀抢购
					<text class="u-font-sm">08:00场 08:00-23:00</text>
				</view>
				<button :plain="true" type="default" size="mini">查看全部</button>
			</view>
			<!-- 秒杀 -->
			<view class="u-m-20 u-p-20 bf-card">
				<scroll-view scroll-x enable-flex class="bf-secKill-scroll" >
					<view class="u-flex u-p-r-20 u-m-t-20">
						<view class="bf-secKill-scroll-item u-m-r-20" v-for="item in seckillSkuVoList" :key="item.skuId">
							<u-image :src="item.imgUrl"
								border-radius="30rpx" width="200rpx" height="200rpx"></u-image>
							<text class="u-font-sm u-m-t-5">{{item.skuName}}</text>
							<AddToCart :cartDetail="item" :skuId="item.skuId"></AddToCart>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<!-- 如何购买商品 -->
		<view class="u-p-20 u-m-20 gg-border u-font-xs">
			<view class="u-m-b-20">如何在[白谷]购买商品</view>
			<view class="u-flex">
				<view class="gg-number u-m-r-10">1</view>
				挑商品
				<u-icon name="arrow-right-double u-m-l-10 u-tips-color"></u-icon>
				<u-icon class="u-content-color" name="arrow-right-double"></u-icon>
				<view class="gg-number gg-number-gray u-m-r-10 u-m-l-10">2</view>
				选提货点
				<u-icon name="arrow-right-double u-m-l-10 u-tips-color"></u-icon>
				<u-icon class="u-content-color" name="arrow-right-double"></u-icon>
				<view class="gg-number gg-number-gray u-m-r-10 u-m-l-10">3</view>
				次日16点提货点取货
			</view>
		</view>
		<!-- 热销好货 -->
		<view class="u-font-xl u-type-error u-m-20">热销好货</view>
		<view class="bf-card u-p-r-20 u-m-t-20" v-for="item in hotSkuList" :key="item.id">
			<view class="bf-product-item u-m-b-10 u-m-l-20 u-m-r-20 u-flex">
				<ListImgItem :src="item.imgUrl" width="200rpx"
				:showLeft="item.skuType===1"
				:showRight="false"
				:showBottom="item.isNewPerson===1"
					height="200rpx"></ListImgItem>
				<view class="bf-product-item-msg u-border-bottom u-p-b-20 u-m-l-20">
					<view class="bf-product-item-msg-title">
						<view class="u-font-lg">{{item.title}}</view>
						<view class="u-type-info u-font-sm">已售 {{item.sale}}/剩余 {{item.stock}}</view>
						<view class="u-type-error-dark u-font-xs" v-for="rule,index in item.ruleList" :key="index">促销规则</view>
					</view>
					<view class="u-flex flex-row-between">
						<view class="u-type-error bf-product-item-msg-price">
							<text>$</text>
							<text class="bf-product-item-msg-price-value">125</text>
						</view>
						<AddToCart :cartDetail="item" :skuId="item.id"></AddToCart>
					</view>


				</view>
			</view>
		</view>
	</view>
	<view v-else class="emptyPage"><u-empty mode="page"></u-empty></view>

</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				background: {
					backgroundImage: ""
				},
				list: [
					'周末的我好像睡觉',
					'题好难背',
					'我好垃圾',
					'想吃桥头排骨'
				],
				popup: false,
				bfCateProgress: 0,
				deviceWidth: 0 ,//设备宽
				token:null
			}
		},
		computed: {
			...mapGetters("indexModule",
				['categoryList',
					'hotSkuList',
					'newPersonSkuInfoList',
					'seckillTime',
					'seckillSkuVoList',
					'leaderAddressVo'
				])
		},
		methods: {
			...mapActions("indexModule", ["getHomeIndexAction"]),
			// 显示细则弹框
			showPopUp() {
				this.popup = !this.popup
			},
			//计算百分比
			scrollMove(e) {
				// console.log(e);
				let scrollLeft = e.detail.scrollLeft //移动的距离
				let scrollAllWidth = e.detail.scrollWidth - this.deviceWidth //可移动的总长
				let percent = parseInt((scrollLeft / scrollAllWidth) * 100)
				// 进度条进度太快需要防抖
				this.$u.debounce(() => {
					this.bfCateProgress = percent
				}, 200)
			},
			// 跳转到提货点页面
			toLocation(){
				// 通过uview的路由跳转的方式
				this.$u.route("/pagesLocation/MyPickUpLocation/MyPickUpLocation")
			}
			

		},
		watch:{
			"leaderAddressVo.takeName":{
				handler(newval,oldval){
					if(!newval){
						uni.redirectTo({
							url:"/pagesLocation/MyPickUpLocation/MyPickUpLocation"
						})
					}
				},
				deep:true//一般情况 deep是用来监听对象的内部属性的变化的
			}
		},
		mounted() {
			uni.getSystemInfo({
					success: (res) => {
						this.deviceWidth = res.windowWidth
					}
				});
				let token = uni.getStorageSync("token")
				this.token = token
				if (this.$u.test.isEmpty(token)) {
				      uni.reLaunch({
				        url: '/pages/login/login',
				      });
				      return;
				    }
				this.getHomeIndexAction()

		}
	}
</script>

<style lang="scss" scoped>
	.bf {
		&-map-slot-wrap {
			color: #fff;
			font-size: 20rpx;
			background-color: rgba(255, 255, 255, .2);
			border-radius: 20rpx;

		}

		// 头部主要内容
		&-content {
			background-image: linear-gradient(to right, rgb(251, 214, 141), rgb(246, 163, 131));
			// height: 600rpx;
			border-bottom-left-radius: 50rpx;
			border-bottom-right-radius: 50rpx;

			&-header {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 60rpx;
				background-color: white;
				border-radius: 60rpx;

				&-notice {
					flex: 1;
				}
			}

			&-new {
				height: 450rpx;
				background-color: white;
				border-radius: 20rpx;

				// background-color: red;
				&-scroll {
					height: 320rpx;

					&-item {
						display: flex;
						flex-direction: column;
					}
				}
			}

			&-footer {
				border-bottom-left-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
				height: 30rpx;
			}
		}

		// 头部主要内容规则					
		&-rule {
			display: flex;
			justify-content: center;
		}

		// 分类
		&-category {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			&-progress {
				width: 10vw;

			}
		}

		//下划线
		&-card {
			border-radius: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
			/*下边阴影 */
		}

		&-secKill {
			&-scroll {
				 height: 320rpx;
			}
		}

		&-product {
			&-item {
				height: 250rpx;

				&-msg {
					height: 100%;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&-price {
						&-value {
							font-size: 50rpx;
						}
					}
				}
			}
		}

	}
	.emptyPage {
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	}
	
</style>
